﻿<div class="how-to-use">
    <h2>How to Use Neurite</h2>
    <p><a href="https://satellitecomponent.github.io/Neurite/">Neurite</a> allows you to embed anything - text, photos, audio, video, PDFs, AI, and webpages - directly within the Mandelbrot set. You can 'Drag and drop' or 'Paste' local files and web content straight into the fractal.</p>

    <h3>Controls</h3>
    <table>
        <tr>
            <th>Category</th>
            <th>Key/Combination</th>
            <th>Action</th>
        </tr>
        <!-- Navigation -->
        <tr>
            <td rowspan="2"><strong>Navigation</strong></td>
            <td><code>Click and drag</code></td>
            <td>Move around</td>
        </tr>
        <tr>
            <td><code>Scroll</code></td>
            <td>Zoom through the fractal</td>
        </tr>
        <!-- Node Management -->
        <tr>
            <td rowspan="5"><strong>Node Management</strong></td>
            <td><code>Shift + double click</code></td>
            <td>Create text node</td>
        </tr>
        <tr>
            <td><code>Shift</code></td>
            <td>Freeze time</td>
        </tr>
        <tr>
            <td><code>Hold Shift + click</code></td>
            <td>Connect two nodes</td>
        </tr>
        <tr>
            <td><code>Double click</code></td>
            <td>Anchor a node</td>
        </tr>
        <tr>
            <td><code>Alt/Option + double click</code></td>
            <td>Create an AI node</td>
        </tr>
        <!-- Node Selection & Arrangement -->
        <tr>
            <td rowspan="6"><strong>Node Selection & Arrangement</strong></td>
            <td><code>Alt/Option + Drag Node</code></td>
            <td>Arrange the node (avoids text selection)</td>
        </tr>
        <tr>
            <td><code>Alt/Option + Click</code></td>
            <td>Select nodes</td>
        </tr>
        <tr>
            <td><code>Alt/Option + Drag Canvas</code></td>
            <td>Select multiple nodes</td>
        </tr>
        <tr>
            <td><code>Arrow Keys</code></td>
            <td>Move selected nodes</td>
        </tr>
        <tr>
            <td><code>d</code></td>
            <td>Scale selected nodes down</td>
        </tr>
        <tr>
            <td><code>f</code></td>
            <td>Scale selected nodes up</td>
        </tr>
        <!-- Fractal Controls -->
        <tr>
            <td rowspan="4"><strong>Fractal Controls</strong></td>
            <td><code>Edit Tab</code></td>
            <td>Main sliders for fractal rendering and color</td>
        </tr>
        <tr>
            <td><code>Alt/Option + f</code></td>
            <td>Freeze the currently displayed fractal lines</td>
        </tr>
        <tr>
            <td><code>Alt/Option + c</code></td>
            <td>Clear any frozen lines</td>
        </tr>
        <tr>
            <td><code>Alt/Option + s</code></td>
            <td>Save the fractal lines as a PNG</td>
        </tr>
    </table>

    <h4>UI Tips</h4>
    <ul>
        <li>Make sure to zoom (Scroll) deeper into the fractal before creating nodes. Otherwise, they will not have any space to spread out.</li>
        <li>When arranging windows, drag them via the title input. Rescale by holding Shift and scrolling over the node.</li>
        <li>Use Shift to freeze nodes in place, then double click the nodes that should remain anchored once unfrozen (releasing Shift).</li>
        <li>In the '?' tab, the AI HOW-TO checkbox will send a context message to the AI that allows it to answer questions about Neurite.</li>
    </ul>
</div>